<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
import { getResumeApi, getPosNameApi, getResumeDetailApi } from '../../api/hr'
// 查询条件表单
const formInline = ref({ posId: '', isView: '', createTime: '' })
const posNameList = ref([{ id: '1', title: 'Java' }, { id: '2', title: 'PHP' }])
const resumeListTable = ref([{},{},{},{},{},{},{},{},{},{},{},{},{},{},{}])
const router = useRouter();
onMounted(() => {
  onSubmit()
  getPosName()
})
// 查询职位名称
const getPosName = async () => {
  const result = await getPosNameApi()
  if (result.code) {
    posNameList.value = result.data
  }else {
    ElMessage.error(result.message)
  }
}
// 查询简历
const onSubmit = async () => { 
  console.log(formInline.value)
  if(formInline.value.createTime == null){
    formInline.value.createTime = ''
  }
  const result = await getResumeApi(formInline.value.posId, formInline.value.isView, formInline.value.createTime, currentPage.value, pageSize.value)
  if(result.code){
    resumeListTable.value = result.data.rows
    total.value = result.data.total
  }else{
    ElMessage.error(result.message)
  }
}
// 清除条件
const clear = () => {
  formInline.value = { posId: '', isView: '', createTime: '' }
  onSubmit()
}
const queryResumeDetails = async (row) => {
  console.log(row.id)
  const result = await getResumeDetailApi(row.id)
  if(result.code){
    resume.value = result.data
    previewVisible.value = true
  }else{
    ElMessage.error(result.message)
  }
}
const resume = ref({
  id: '',
  name: '',
  gender: null,
  birthDate: '',
  phone: '',
  email: '',
  address: '',
  jobIntention: '',
  education: [],
  workExperience: [],
  projects: [],
  skills: [],
  selfIntroduction: ''
})

const previewVisible = ref(false)

const getGenderText = (gender) => {
  return gender === 1 ? '男' : gender === 2 ? '女' : '未填写'
}
const reviewPass = (row) => {
  ElMessage.warning('未实现')
}
const noReviewPass = (row) => {
  ElMessage.warning('未实现')
}

const chat = () => {
  console.log(resume.value.userId)
  // 将求职者 ID存储在本地存储中，以便聊天页面获取
  localStorage.setItem('targetJobseekerId', resume.value.userId)
  router.push('/hr/hmenu3')
}

//分页
const total = ref(20)
const currentPage = ref(1)
const pageSize = ref(8)
const background = ref(true)
//每页大小改变时触发
const handleSizeChange = (val) => {
  pageSize.value = val
  currentPage.value = 1
  onSubmit()
}
//当前页码改变时触发
const handleCurrentChange = (val) => {
  currentPage.value = val
  onSubmit()
}
const value1 = ref('')
</script>

<template> 
<h2>简历管理</h2>
  <!-- 查询表单 -->
  <div class="container">
    <el-form :inline="true" :model="formInline" class="demo-form-inline">

      <el-form-item label="职位">
        <el-select
          v-model="formInline.posId"
          placeholder="选择职位"
          style="width: 190px"
        >
          <!-- 遍历posNameList，label为职位名称，value为职位id -->
          <el-option v-for="item in posNameList" :key="item.id" :label="item.title" :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="简历状态">
        <el-select
          v-model="formInline.isView"
          placeholder="选择简历状态"
          style="width: 190px"
        >
          <el-option label="待查看简历" value="0" />
          <el-option label="已查看简历" value="1" />
        </el-select>
      </el-form-item>
      <el-form-item label="投递时间">
        <el-date-picker
          v-model="formInline.createTime"
          type="datetime"
          placeholder="选择投递时间" 
          style="width: 240px"
          value-format="YYYY-MM-DD HH:mm:ss"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
        <el-button type="info" @click="clear">清空</el-button>
      </el-form-item>
    </el-form>
  </div>
  <!-- 职位表格数据 -->
  <div class="container">
    <el-table :data="resumeListTable" border style="width: 100%; height: 500px;" >
      <el-table-column prop="title" label="职位名称" width="240"  align="center"/>
      <el-table-column prop="name" label="请求者名称" width="140"  align="center"/>
      <el-table-column label="性别" width="120"  align="center">
        <template #default="scope">
          <el-tag v-if="scope.row.gender == 1">男</el-tag>
          <el-tag v-else>女</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="phone" label="联系电话" width="140"  align="center"/>
      <el-table-column label="简历状态" width="140" align="center" >
        <template #default="scope">
          <span v-if="scope.row.isView == 0">待查看</span>
          <span v-else-if="scope.row.isView == 1">已查看</span>
          <span v-else>其他</span>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="投递时间" width="200"  align="center"/>
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button type="primary" plain size="small" @click="queryResumeDetails(scope.row)">查看详情</el-button>
          <el-button type="danger" plain size="small" @click="reviewPass(scope.row)">通过</el-button>
          <el-button type="danger" plain size="small" @click="noReviewPass(scope.row)">不通过</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <!-- 分页 -->
  <div class="container">
  <el-pagination
    v-model:current-page="currentPage"
    v-model:page-size="pageSize"
    :page-sizes="[8, 16, 24]"
    :size="size"
    :background="background"
    layout="total, sizes, prev, pager, next, jumper"
    :total="total"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
  />
  </div>
  <!-- 预览简历dialog -->
  <el-dialog v-model="previewVisible" title="简历预览" width="70%" center>
    <div class="preview-content">
      <div class="resume-preview">
        <div class="resume-header">
          <h2>{{ resume.name }}</h2>
          <p class="resume-title">求职意向：{{ resume.jobIntention || '未填写' }}</p>
        </div>

        <div class="resume-content">
          <!-- 基本信息 -->
          <div class="section">
            <h3>基本信息</h3>
            <div class="info-row">
              <span>姓名：{{ resume.name || '未填写' }}</span>
              <span>性别：{{ getGenderText(resume.gender) }}</span>
            </div>
            <div class="info-row">
              <span>电话：{{ resume.phone || '未填写' }}</span>
              <span>邮箱：{{ resume.email || '未填写' }}</span>
            </div>
            <div class="info-row">
              <span>出生日期：{{ resume.birthDate || '未填写' }}</span>
              <span>地址：{{ resume.address || '未填写' }}</span>
            </div>
          </div>

          <!-- 教育背景 -->
          <div class="section">
            <h3>教育背景</h3>
            <div v-if="resume.education && resume.education.length > 0" v-for="(edu, index) in resume.education" :key="index" class="edu-item">
              <div class="edu-header">
                <span class="edu-school">{{ edu.school }}</span>
                <span class="edu-time">{{ edu.startDate }} - {{ edu.endDate }}</span>
              </div>
              <div class="edu-major">{{ edu.major }}</div>
              <div class="edu-degree">{{ edu.degree }}</div>
            </div>
            <div v-else class="empty-tip">暂无教育背景信息</div>
          </div>

          <!-- 工作经历 -->
          <div class="section">
            <h3>工作经历</h3>
            <div v-if="resume.workExperience && resume.workExperience.length > 0" v-for="(exp, index) in resume.workExperience" :key="index" class="exp-item">
              <div class="exp-header">
                <span class="exp-company">{{ exp.company }}</span>
                <span class="exp-time">{{ exp.startDate }} - {{ exp.endDate }}</span>
              </div>
              <div class="exp-position">{{ exp.position }}</div>
              <div class="exp-duties">
                <p v-for="(duty, idx) in exp.duties" :key="idx" class="duty-item">- {{ duty }}</p>
              </div>
            </div>
            <div v-else class="empty-tip">暂无工作经历信息</div>
          </div>

          <!-- 项目经历 -->
          <div class="section">
            <h3>项目经历</h3>
            <div v-if="resume.projects && resume.projects.length > 0" v-for="(project, index) in resume.projects" :key="index" class="project-item">
              <div class="project-header">
                <span class="project-name">{{ project.name }}</span>
                <span class="project-time">{{ project.startDate }} - {{ project.endDate }}</span>
              </div>
              <div class="project-description">{{ project.description }}</div>
              <div class="project-responsibility">
                <p v-for="(resp, idx) in project.responsibility" :key="idx" class="resp-item">- {{ resp }}</p>
              </div>
            </div>
            <div v-else class="empty-tip">暂无项目经历信息</div>
          </div>

          <!-- 技能专长 -->
          <div class="section">
            <h3>技能专长</h3>
            <div v-if="resume.skills && resume.skills.length > 0" class="skills">
              <el-tag v-for="(skill, index) in resume.skills" :key="index" size="medium">{{ skill }}</el-tag>
            </div>
            <div v-else class="empty-tip">暂无技能信息</div>
          </div>

          <!-- 自我介绍 -->
          <div class="section">
            <h3>自我介绍</h3>
            <div class="self-intro" v-if="resume.selfIntroduction">{{ resume.selfIntroduction }}</div>
            <div v-else class="empty-tip">暂无自我介绍信息</div>
          </div>
        </div>
      </div>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="chat()">立即沟通</el-button>
        <el-button @click="previewVisible = false">关闭</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<style scoped>
  h2{
    font-size: 24px;
  }
  .container {
    margin-top: 10px;
  }
  :deep(.el-dialog__body) {
  padding: 0 !important;
}

.preview-content {
  padding: 30px;
  background-color: white;
}

.resume-preview {
  max-width: 800px;
  margin: 0 auto;
}

.resume-header {
  padding: 30px;
  background-color: #409EFF;
  color: white;
  margin-bottom: 30px;
  position: relative;
  overflow: hidden;
}

.resume-header h2 {
  font-size: 28px;
  margin: 0;
  position: relative;
  z-index: 1;
}

.resume-title {
  font-size: 16px;
  opacity: 0.8;
  margin-top: 10px;
  position: relative;
  z-index: 1;
}

.resume-header::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
  background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 100%);
  transform: skewX(-20deg);
  transform-origin: top right;
}

.resume-content {
  padding: 0 30px 30px;
}

.section {
  margin-bottom: 30px;
}

.section h3 {
  color: #304156;
  font-size: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #ebeef5;
  margin-bottom: 20px;
  position: relative;
}

.section h3::before {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 80px;
  height: 2px;
  background-color: #409EFF;
}

.info-row {
  display: flex;
  margin-bottom: 10px;
  color: #606266;
  flex-wrap: wrap;
}

.info-row span {
  margin-right: 30px;
  margin-bottom: 5px;
  display: flex;
  align-items: center;
}

.info-row span::before {
  content: '•';
  color: #409EFF;
  margin-right: 8px;
}

.edu-item, .exp-item, .project-item {
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px dashed #ebeef5;
}

.edu-item:last-child, .exp-item:last-child, .project-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.edu-header, .exp-header, .project-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
}

.edu-school, .exp-company, .project-name {
  font-weight: bold;
  color: #304156;
}

.edu-time, .exp-time, .project-time {
  color: #909399;
  font-size: 14px;
}

.edu-major, .exp-position {
  font-size: 16px;
  color: #606266;
  margin-bottom: 5px;
}

.edu-degree {
  color: #909399;
  font-size: 14px;
}

.exp-duties, .project-responsibility {
  margin-top: 10px;
}

.duty-item, .resp-item {
  color: #606266;
  margin-left: 20px;
  line-height: 1.6;
  position: relative;
}

.duty-item::before, .resp-item::before {
  content: '•';
  color: #409EFF;
  position: absolute;
  left: -15px;
  top: 0;
}

.skills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}

.empty-tip {
  color: #909399;
  padding: 15px;
  background-color: #f5f7fa;
  border-radius: 4px;
  text-align: center;
  font-size: 14px;
}

.self-intro {
  line-height: 1.8;
  color: #606266;
  padding: 15px;
  background-color: #f5f7fa;
  border-radius: 4px;
}

/* 响应式布局 */
@media (max-width: 768px) {
  .resume-header {
    padding: 20px;
  }

  .resume-content {
    padding: 0 20px 20px;
  }

  .info-row {
    flex-direction: column;
  }

  .info-row span {
    margin-right: 0;
    margin-bottom: 5px;
  }

  .edu-header, .exp-header, .project-header {
    flex-direction: column;
  }

  .edu-time, .exp-time, .project-time {
    margin-top: 5px;
  }
}
</style>